<template>
	<view class="resources">
		<view class="header-index">
			<img src="../../static/img/logo-JZ.png" alt="">
		</view>
		<view class="pages">
		<view class="top-img">
			<img src="../../static/img/top_bg_image.png" alt="">
		</view>
		<view class="tab">
			<view class="tab-item" v-for="(item,index) in tabList" :key="index">
				<view class="tab-item-img">
					<img :src="item.Image" alt="">
				</view>
				<view class="tab-item-text">
					<view>{{item.name}}</view>
					<view><span>{{item.nuber}}</span></view>
				</view>
			</view>
		</view>
		<view class="changetab">
			<view class="changetab-item" v-for="(item,index) in changeList" :key="index"
				:style="{color:changeListValue==item.value?'#1664FF':''}" @click="changeTab(item.value)">
				{{item.name}}
				<span v-if="changeListValue==item.value" class="changetab-tab"></span>
			</view>
		</view>
		<view v-if="changeListValue=='揭榜挂帅'">
			<ListOne ref="childComponentOne"></ListOne>
		</view>
		<view v-if="changeListValue=='科技成果'">
			<ListTwo ref="childComponentTwo"></ListTwo>
		</view>
		</view>
	</view>
</template>
<script>
	import ListOne from './ListOne.vue' //揭榜挂帅
	import ListTwo from './ListTwo.vue' //科技成果
	export default {
		components: {
		  ListOne, //揭榜挂帅
		  ListTwo //科技成果
		},
		data() {
			return {
				tabList: [{
					name: '科技成果',
					nuber: '1万+',
					Image: require("../../static/img/tab-item1.png")
				}, {
					name: '技术需求',
					nuber: '300+',
					Image: require("../../static/img/tab-item2.png")
				}, {
					name: '人才专家',
					nuber: '30万+',
					Image: require("../../static/img/tab-item3.png")
				}, {
					name: '科技企业',
					nuber: '200万+',
					Image: require("../../static/img/tab-item4.png")
				}, {
					name: '科技政策',
					nuber: '30000+',
					Image: require("../../static/img/tab-item5.png")
				}, {
					name: '服务商',
					nuber: '1000+',
					Image: require("../../static/img/tab-item6.png")
				}],
				changeListValue: '揭榜挂帅',
				changeList: [{
					name: '揭榜挂帅',
					value: '揭榜挂帅'
				}, {
					name: '科技成果',
					value: '科技成果'
				}, ]
			}
		},
		onReachBottom() {
			if(this.changeListValue=='揭榜挂帅'){
			this.$refs.childComponentOne.reachsBottom();
			}else{
				this.$refs.childComponentTwo.reachsBottom();
			}
		},
		methods: {
			changeTab(e) {
				this.changeListValue = e
			}
		}
	}
</script>
<style lang="scss" scoped>

	.header-index{
		padding-top: 115rpx;
		width: 100%;
		position: fixed;
		background-color: #F1F6FA;
		background-image: url(../../static/img/my-bg.png);
		background-repeat: no-repeat;
		background-size: 100% auto;
		top: 0;
		height: 50px;
		z-index: 999;
		img{
			top: 90%;
			left: 50%;
			position: absolute;
			width: 130rpx;
			height: 70rpx;
			transform: translate(-50%, -100%);
		}
	}
	.resources {
		
		padding-top: 210rpx;
		background-color: #F1F6FA;
		background-image: url(../../static/img/my-bg.png);
		background-repeat: no-repeat;
		background-size: 100% auto;
		height: 100%;
		font-size: 28rpx;
		color: #333333;
		.pages{
			height: 100%;
			padding: 0 20rpx;
		}
	}

	.top-img {
		height: 230rpx;
	}

	.top-img img {
		width: 100%;
		height: 100%;
	}

	.tab {
		width: 100%;
		margin-top: 20rpx;
	}

	.tab .tab-item {
		display: inline-block;
		width: calc(33.33% - 30rpx);
		padding: 10rpx 10rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin-bottom: 15rpx;
	}

	.tab .tab-item:nth-child(2),
	.tab .tab-item:nth-child(5) {
		margin: 0 15rpx;
	}

	.tab-item-img {
		width: 30%;
		display: inline-block;
		vertical-align: super;
		margin-right: 1%;
	}

	.tab-item-img img {
		width: 50rpx;
		height:50rpx;
		margin-left: 1%;
	}

	.tab-item-text {
		display: inline-block;
	}

	.tab-item-text>view {
		line-height: 40rpx;
		color: #666666;
	}

	.tab-item-text>view>span {
		display: inline-block;
		// font-size: 36rpx;
		line-height: 40rpx;
		font-size: 25rpx;
		margin-right: 10rpx;
		margin-left: -4rpx;
		font-weight: 600;
		margin-top:-30rpx ;
		// font-style: italic;
		// font-family: youshebiaotihei;
	}

	.changetab .changetab-item {
		display: inline-block;
		font-size: 32rpx;
		font-weight: 600;
		width: 50%;
		text-align: center;
		line-height: 100rpx;
		position: relative;
	}

	.changetab-tab {
		position: absolute;
		display: inline-block;
		width: 35rpx;
		height: 4rpx;
		background: linear-gradient(270deg, #1568ED 0%, #5DB5FF 100%);
		bottom: 10px;
		left: 50%;
		transform: translate(-50%, 0%);
	}
</style>